<template>
    <div class="">
        <div class="balance">
            <div>
                <p class="tips" v-if="typeName">我的{{typeName}}</p>
                <p class="money">{{accountBalance | money}}</p>
            </div>
        </div>

        <van-cell-group style="margin-top: 10px;" v-if="withdrawFlag == 1">
            <van-cell title="提现" is-link @click="withdrawal" :value="`${withdrawalMoney}`">
                <img src="./../../assets/tixian.png" class="icon" slot="icon"/>
            </van-cell>
        </van-cell-group>
        <van-cell-group style="margin-top: 10px;">
            <van-cell title="我的账单">
                <img src="./../../assets/zhangdan.png" class="icon" slot="icon"/>
            </van-cell>
            <van-list
                 v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getDetail">
                <van-cell v-for="item in history" v-bind:key="item" :title="item.objectTypeName" :value="item.amount | money" :label="item.createTime">
                </van-cell>  
            </van-list>
        </van-cell-group>

    </div>
</template>

<script>

export default {
    name: 'capitalDetail',
    data() {
        return {
            accountId: '',
            typeName: '',
            withdrawFlag: 0,
            accountBalance: 0,

            pageNum: 0,
            total: -1,
            loading: false, //是否正在加载
            finished: false, //是否加载完了
            history: []
        }
    },

    methods: {
        getDetail() {
            if (this.total !== -1 && this.pageNum >= this.total) {
                this.finished = true;
                return;
            }
            this.pageNum++;
            this.loading = true;
            this.$http.post('/user/userAccountDetail/front/getUserAccountDetailList', {
                accountId: this.accountId,
                pageSize: 10, 
                pageNum: this.pageNum
            }).then(res => {
                this.loading = false;
                if (res.status === 0) {
                    let data = res.data.rows || [];
                    this.total = res.data.total;
                    if (this.pageNum == this.total || (this.pageNum == 1 && data.length == 0)) {
                        this.finished = true;
                    }
                    this.history = this.history.concat(data);
                } else {
                    // 请求失败
                    this.finished = true;
                    return;
                }
            })
        },

        getBase() {
            this.$http.post('user/userAccount/front/getUserAccount', {
                accountId: this.accountId
            }).then(res => {
                console.log(res)
                if (res.status === 0) {
                    this.withdrawFlag = res.data.withdrawFlag;
                    this.accountBalance = res.data.accountBalance;
                    this.typeName = res.data.typeName;

                } else {
                    this.$toast.fail(res.message)
                }
            })
        },

        withdrawal() {
            if (this.withdrawFlag == '0') {
                this.$toast('当前不可提现');
                return;
            }
            this.$router.push('withdrawal?id=' + this.accountId)
        }
    },

    computed: {
        withdrawalMoney() {
            if (!this.withdrawFlag) {
                return '当前不可提现';
            }
            if (this.withdrawFlag == '0') {
                return '当前不可提现';
            }
            return `可提现${(parseFloat(this.accountBalance || 0) / 100).toFixed(2)}元`;
        }
    },  

    created() {
        this.accountId = this.$route.query.id;
        console.log(this.accountId)
        this.getBase();
    }
}
</script>

<style scoped lang="scss">
@import './../../assets/default.scss';
.balance {
    height: 150px;
    background-color: $defaultColor;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .tips {
        color: rgba(255,255,255, .8);
        font-size: 14px;
    }

    .money {
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        line-height: 110px;
    }

    /deep/ .van-button {
        color: $defaultColor;
        font-size: 16px;
    }
}

.icon {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    margin: 0 5px;
}
</style>
